<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <title>Egar</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div class="overlay-wrapper" id="overlay-wrapper">
    <div class="overlay-body">
      <div class="overlay-title">Egar Play</div>
      <div class="overlay-input">
        <input id="input-server-ip" type="text" placeholder="请输入服务器地址，格式：127.0.0.1、www.host.com" value="127.0.0.1">
        <input id="input-server-port" type="text" placeholder="请输入服务器端口，格式：0~65535的整数" value="9888">
        <input id="input-name" type="text" placeholder="请输入本局昵称" value="test">
      </div>
      <button type="button" id="button-play">开始游戏</button>

      <div class="overlay-bottom">
        <div class="help" style="margin-top: 16px;">
          <h3>帮助</h3>
          <p>输入<b>地址</b>、<b>端口</b>与<b>昵称</b>后，再点击<b>开始游戏</b>按钮即可进入游戏</p>
          <p><b>移动鼠标</b>控制你的球球<br></p>
          <p>滑动<b>鼠标轮滑</b>放大缩小（需要勾选<b>手动缩放</b>）</p>
          <p>按下<b>W</b>键吐球<br></p>
          <p>按下<b>E</b>键分身<br></p>
          <p>按下<b>回车</b>键打开聊天框，再按下<b>回车</b>键发送消息<br></p>
        </div>
  
        <div class="settings" style="margin-top: 16px;">
          <h3>设置</h3>
          <label>
            <input id="showName" type="checkbox">
            显示名字
          </label>
          <label>
            <input id="showGrid" type="checkbox" checked>
            显示网格
          </label>
          <label>
            <input id="showChat" type="checkbox">
            显示聊天
          </label>
          <label>
            <input id="darkTheme" type="checkbox">
            护眼模式
          </label>
          <label>
            <input id="manualScale" type="checkbox" checked>
            手动缩放
          </label>
        </div>
      </div>

      <div class="version" style="margin-top: 10px;">
        Egar v0.0.1 by janqx
      </div>
    </div>
  </div>
  <canvas id="canvas"></canvas>
  <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>